<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<title>Register</title>
<style>


.error
{
	color:red;	
}



.label
{
	color:purple;
}

#errorMessage
{
	color:white;
	background-color: #8A112F;
	border-style: solid;
	border-width: 2px;
	border-color: #999;	
}



</style>
<script>
//validate the register form.
$().ready(function() {		
	validate();
});



//validate rules.
function validate()
{		
	$("#theForm").validate({
		debug:true,	
		errorClass:"error",
		rules:
		{				
			'user.name':
			{
				required:true,				
				remote:"userAction!chkIfNameExist.action"			  						
			},
			'user.email':
			{
				required:true,				
				email:true,
				remote:"userAction!chkIfEmailExist.action"
			},		
			'user.password':
			{
				required:true,
				minlength:6,
				maxlength:16
			},
			
			passwordConfirmed:
			{
				equalTo:"#password_register"
			}
			
			
		},
		
		messages:
		{
			'user.email':
			{								
				remote:"The email has been registered."
			},
			
			'user.password':
			{				
				minlength:"The password's size should be at least 6 characters.",
				maxlength:"The password's size should be at most 16 characters."
			},
			passwordConfirmed:
			{
				equalTo:"Please enter the same value again."
			},
			
			'user.name':
			{				
				remote:"The name has been registered."	
			}
		},
		
		invalidHandler:function(form,validator)
		{			
			alert("Here comes error(s) oh your registering form.");			
		},
		
		submitHandler: function(form) 
		{ 
			//$("#theForm").submit();
			form.submit();
		}
		
	});
	
}
</script>
</head>
<body>
<jsp:include page="WEB-INF/head.jsp"></jsp:include>
<div id="mainForm" >
<form action="userAction!register.action" method="post"  id="theForm" autocomplete="off">
<font class="bigBlue">Register</font>
<hr>

<font color="#666" style="font-weight:bold">Create your free personal account</font><br><br>

<div style="display:none;margin-bottom: 10px;" id="errorMessage" class="roundRec">
<img width="15" height="15" src="img/error.png">You have input an invalid info.Access denied.</div>
<div style="background-image: url(img/fieldgroup_back-440.png);background-repeat: no-repeat;padding: 8px;width: 440px;float:left">
Username<br>
<input type="text" name="user.name" id="name" maxlength="11" class="longInputStyle"><br><br>

Password<br>
<input type="password" name="user.password" maxlength="17" id="password_register"class="longInputStyle"><br><br>

Confirm Password <br>
<input type="password" name="passwordConfirmed" maxlength="17"class="longInputStyle"><br><br>

Email<br>
<input type="text" name="user.email" maxlength="20"class="longInputStyle"><br><br>
<input type="submit" value="Create your account" class="bigBtn">
&nbsp;&nbsp;&nbsp;<img src="img/go-back.png" width="20" height="20">&nbsp;
<a href="index.jsp">Back to Index</a>&nbsp;|&nbsp;
<a href="login.jsp">Login in</a>
</div>
<div style="padding-left: 450px;">
<div style="border-left-style: solid;border-left-width: 1px;width: 300px;height: 350px;border-color: #ccc;padding-left: 20px;">
<div style="text-align: center;" class="roundRec">
Welcome to join us!</div><br>
After your registering,you can:<br><br>
<img src="img/check.png"/>&nbsp;Discuss together<br><br>

</div>

</div>




<br>


</form>
</div>

</body>
</html>